<template>
	<view class="columnbox wdh-100 content">
		
		<u-navbar @rightClick="rightClick" :autoBack="true" bgColor="#2373CA" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#fff;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title" style="color: #fff;">商家经营台</text>
			</template>
		</u-navbar>
		<view class="color-box columnbox wdh-100 " >
			<view class="rowbox wdh-100 jus">
				<image mode="aspectFill" class="user-img"
					:src="userInfo.user.avatar==null?'/static/img/logo.jpeg':infos.imgUrl">
				</image>
				<view class="columnbox als">
					<view class="user-name"v-if="infos.stationName">{{infos.stationName}}</view>
					<view class="join" v-if="infos.createTime">加入时间：{{infos.createTime}}</view>
				</view>
			</view>
			<view class="columnbox o-box">
				<view class="o-title wdh-100" @click="show = true">
					<span class="fn_sel">{{columns1[numerSelect].stationName}}</span>
					<uni-icons type="down" style="margin-left: 8rpx;" color="#72778A" size="15"></uni-icons>
				</view>
				<view class="rowbox wdh-100 spb" style="margin-top: 40rpx;" @click="dingdanliang">
					<view class="columnbox o-info" >
						<view class="o-num">{{infos.totalOrders||0}}</view>
						<view class="o-desc">总订单量</view>
					</view>
					<view class="columnbox o-info">
						<view class="o-num"><text style="font-size: 24rpx;margin-right: 4rpx;">¥</text>
							{{infos.totalAmount||0}}
						</view>
						<view class="o-desc">总实收金额</view>
					</view>
					<view class="columnbox o-info" >
						<view class="o-num"><text style="font-size: 24rpx;margin-right: 4rpx;">L</text>
						{{infos.totalVolume||0}}</view>
						<view class="o-desc">总加油量</view>
					</view>
				</view>
			</view>
			<view class="t-box rowbox spb" @click="shujuzhongxin">
				<view class="rowbox wdh-100 jus">
					<view class="columnbox o-info">
						<view class="o-num r-title"><text
								style="font-size: 24rpx;margin-right: 4rpx;">+</text>{{infos.todayTotalOrders||0}}</view>
						<view class="o-desc">今日新增订单</view>
					</view>
					<view class="columnbox o-info">
						<view class="o-num r-title"><text
								style="font-size: 24rpx;margin-right: 4rpx;">¥</text>{{infos.todayTotalAmount||0}}
						</view>
						<view class="o-desc">今日实收金额</view>
					</view>
					<view class="columnbox o-info">
						<view class="o-num r-title"><text
								style="font-size: 24rpx;margin-right: 4rpx;">L</text>{{infos.todayTotalVolume||0}}</view>
						<view class="o-desc">今日总加油量</view>
					</view>
				</view>
			</view>
		</view>


		<view class="columnbox o-box">
			<view class="o-title wdh-100">管理工具</view>
			<view class="t-list wdh-100">
				<view class="columnbox t-one-box" @click="stationList">
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/3fb802cfb416426e9c06b5fc9040abe0.png" mode="widthFix" ></image>
					加油站信息
				</view>
				<view class="columnbox t-one-box" @click="showGongWei">
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/8d27ac4167234be8ad26547a2c013104.png" mode="widthFix"></image>
					油品管理
				</view>
				<view class="columnbox t-one-box" @click="yuyuedingdan">
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/b53e5cdf6c884fc6b7dbed67d425eb3e.png" mode="widthFix"></image>
					油价管理
				</view>
				<view class="columnbox t-one-box" @click="showOrderNum">
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/79d2fa4632cf42449f56a0e6232e57e1.png" mode="widthFix"></image>
					油枪管理
				</view>
				<view class="columnbox t-one-box" @click="showStaff">
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/b53e5cdf6c884fc6b7dbed67d425eb3e.png" mode="widthFix"></image>
					数据中心
				</view>
				<view class="columnbox t-one-box" @click="sacncode">
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/11/11/41924eec7b0b466eb044632ae1928d63.png" mode="widthFix"></image>
					扫码兑换
				</view>
				<!-- <view class="columnbox t-one-box" @click="sacncode">
					<image :src="imgurl" mode="widthFix"></image>
					扫码核销
				</view> -->
			</view>
		</view>
		<u-picker @close="show=false" :show="show" :columns="columns" @cancel="cancel" @confirm="changeIso"></u-picker>
		
		<tabBar :value='1'></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				id: '',
				show: false,
				columns1: [],
				columns: [
					[]
				],
				numerSelect: 0,
				dataStatistics: '',
				imgurl:this.$imgUrls + '2024/11/11/41924eec7b0b466eb044632ae1928d63.png',
				infos:{}
			};
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
		},
		onLoad() {
			uni.hideTabBar();
			// 获取商家信息
			this.getInfos();
		},
		onShow() {
			if (this.isLogin) {
			// 获取加油站
			this.getStaticnsList();
			// this.getData()
			} else {
				this.dataStatistics = {
					stationNum: 0,
					allSales: 0,
					todaySales: 0,
					todayWashOrder: 0,
					allWashOrder: 0
				}
			}
		},
		methods: {
			changeIso(e){
				this.numerSelect = e.indexs[0]
				this.show = false;
				this.id = this.columns1[this.numerSelect].id;
				this.getInfos();
			},
			cancel(){
				this.show = false;
			},
			// 获取商家信息
			getInfos(){
				if(this.id == null){
					this.$modal.msg("请先添加加油站");
					return;
				}
				this.$modal.loading('加载中');
				let data = {
					stationId: this.id
				}
				this.$req.get('/xcx/petrolStation/getInfo', data).then(res=>{
					console.log(res)
					this.$modal.closeLoading();
					if(res.data.code==200){
						this.infos = res.data.data;
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			
			//数据中心
			shujuzhongxin(){
					this.$tab.navigateTo('/packageC/numberCenter/numberCenter?id='+this.infos.id)
			},
			// 总订单量
			dingdanliang(){
				this.$tab.navigateTo('/packageC/alldingdanliang/alldingdanliang?id='+this.infos.id)
			},
			yuyuedingdan(){
				this.$tab.navigateTo('/packageC/youjiaMange/youjiaMange')
			},
			// 加油站信息 
			stationList(){
				this.$tab.navigateTo('/packageC/gasStationInfo/gasStationInfo')
			},
			// 扫码核销
			sacncode(){
				let that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType:['qrCode','datamatrix','pdf417'],
					success:(res)=> {
						that.$tab.navigateTo('/packageC/dingdanDetails/dingdanDetails?code='+res.result)
					}
				});
			},
			showOrderNum() {
				uni.navigateTo({
					url: '/packageC/youQiangMange/youQiangMange'
				})
			},
			showStationNum() {
				uni.navigateTo({
					url: '/packageA/work/stationNum/stationNum'
				})
			},
			getData() {
				if (this.isLogin) {
					this.$req.get('/xcx/manager/count/home').then(res => {
						console.log(res)
						if (res.data.code==200) {
							this.dataStatistics = res.data.data
						}else{
							this.$modal.msg(res.data.msg)
						}
					})
				}
			},
			showStaff() {
				this.$tab.navigateTo('/packageC/numberCenter/numberCenter?id='+this.infos.id)
			},
			showGongWei() {
				uni.navigateTo({
					url: '/packageC/youpinMange/youpinMange'
				})
			},
			getStaticnsList(){
				this.$req.get('/xcx/petrolStation/getAllStations').then(res=>{
					this.columns1 = res.data.data;
					this.id = this.columns1[0].id;
					res.data.data.forEach(item=>{
						this.columns[0].push(item.stationName)
					})
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #F4F5FA;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.color-box {
		background: linear-gradient(180deg, #2373CA 0%, #F4F5FA 100%);
		padding: 0 20rpx;
		padding-top: 0;

		.user-image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			margin-right: 20rpx;
		}

		.user-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.join {
			margin-top: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #FFFFFF;
		}

		.user-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			margin-right: 16rpx;
		}
	}

	.o-box {
		width: 710rpx;
		background: #fff;
		padding: 24rpx;
		border-radius: 24rpx;
		margin-top: 36rpx;

		.o-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.o-info {
		width: 33%;

		.o-num {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 44rpx;
			color: #126BC9;
		}

		.o-desc {
			font-family: PingFang SC, PingFang SC;
			font-size: 28rpx;
			color: #212121;
			margin-top: 8rpx;
		}

		.r-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 44rpx;
			color: #FF672D;
		}
	}

	.t-box {
		width: 710rpx;
		background: #fff;
		padding: 32rpx 32rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.t-one-box {
		width: 25%;
		margin-top: 50rpx;
		font-family: PingFang SC, PingFang SC;
		font-size: 24rpx;
		color: #212121;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 10rpx;
		}
	}
</style>